<template>
  <button
    :class="[
      'base-button',
      `type-${type}`,
      `size-${size}`,
      { 'is-round': round, 'is-block': block, 'is-disabled': disabled }
    ]"
    :disabled="disabled"
    @click="handleClick"
  >
    <view v-if="loading" class="button-loading"></view>
    <text v-if="icon && iconPosition === 'left'" class="button-icon">{{ icon }}</text>
    <slot>{{ text }}</slot>
    <text v-if="icon && iconPosition === 'right'" class="button-icon">{{ icon }}</text>
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    // 按钮类型
    type: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'text'].includes(value)
    },
    // 按钮大小
    size: {
      type: String,
      default: 'normal',
      validator: value => ['small', 'normal', 'large'].includes(value)
    },
    // 是否圆角按钮
    round: {
      type: Boolean,
      default: false
    },
    // 是否块级按钮（宽度100%）
    block: {
      type: Boolean,
      default: false
    },
    // 按钮文本
    text: {
      type: String,
      default: ''
    },
    // 按钮图标
    icon: {
      type: String,
      default: ''
    },
    // 图标位置
    iconPosition: {
      type: String,
      default: 'left',
      validator: value => ['left', 'right'].includes(value)
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(event) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', event);
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 $spacing-lg;
  font-weight: $font-weight-medium;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all $transition-base $transition-ease;
  border-radius: $border-radius-base;
  
  &:active:not(.is-disabled) {
    transform: scale(0.98);
  }
  
  &.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  &.is-round {
    border-radius: 100rpx;
  }
  
  &.is-block {
    display: flex;
    width: 100%;
  }
  
  .button-icon {
    font-size: inherit;
    margin-right: $spacing-xs;
    &:last-child {
      margin-right: 0;
      margin-left: $spacing-xs;
    }
  }
  
  .button-loading {
    width: 32rpx;
    height: 32rpx;
    border: 3rpx solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    margin-right: $spacing-xs;
    @include rotate(0.8s);
  }
}

// 按钮类型样式
.base-button.type-primary {
  background: $primary-gradient;
  color: white;
  box-shadow: $shadow-sm;
}

.base-button.type-secondary {
  background: $bg-gray;
  color: $text-primary;
}

.base-button.type-success {
  background: linear-gradient(135deg, $success-color 0%, darken($success-color, 10%) 100%);
  color: white;
}

.base-button.type-warning {
  background: linear-gradient(135deg, $warning-color 0%, darken($warning-color, 10%) 100%);
  color: white;
}

.base-button.type-danger {
  background: linear-gradient(135deg, $error-color 0%, darken($error-color, 10%) 100%);
  color: white;
}

.base-button.type-info {
  background: linear-gradient(135deg, $info-color 0%, darken($info-color, 10%) 100%);
  color: white;
}

.base-button.type-text {
  background: transparent;
  color: $primary-color;
  padding: 0;
  box-shadow: none;
}

// 按钮大小样式
.base-button.size-small {
  height: 60rpx;
  font-size: $font-size-sm;
  padding: 0 $spacing-md;
}

.base-button.size-normal {
  height: 80rpx;
  font-size: $font-size-base;
}

.base-button.size-large {
  height: 96rpx;
  font-size: $font-size-lg;
  padding: 0 $spacing-xl;
}
</style>
